import React, { Suspense } from 'react'
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
import { router } from './RouterList'
import { RouterItem } from '../utils/type'

function RouterView() {
  const newArr = (routes: RouterItem[]) => {
    return routes.map((item: RouterItem, index: number) => {
      return (
        <Route
          key={index}
          path={item.path}
          element={item.to ? <Navigate to={item.to} /> : <item.element />}
        >
          {item.children && newArr(item.children)}
        </Route>
      )
    })
  }
  return (
    <Suspense fallback={<div>路由拼命加载中...</div>}>
      <BrowserRouter>
        <Routes>{newArr(router)}</Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default RouterView
